<template>
  <div class="app-container">

      <el-card>
        <div slot="header" class="clearfix">
          <span>
            <el-form :inline="true" :model="filters">
              <el-form-item label="名称">
                <el-input v-model="filters.name" placeholder="名称" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
              </el-form-item>
              <el-form-item label="代码">
                <el-input v-model="filters.value" placeholder="代码" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="success"  v-show="isAuth('sys:role:search')" icon="el-icon-search" @click="handleSearch">查询</el-button>
                <el-button type="primary"  v-show="isAuth('sys:role:add')"  icon="el-icon-plus" @click="addOrUpdateHandle()">新增</el-button>
              </el-form-item>
          </el-form>
          </span>
        </div>
        <div>
          <el-table size="mini" stripe border ref="table" fit
                    :data="roles"
                    highlight-current-row
                    height="640" v-loading="loading" style="width: 100%;">

            <el-table-column align="center" type="selection" width="50">
            </el-table-column>
            <el-table-column align="center" label="#" width="50">
              <template slot-scope="scope">
                {{scope.$index +1}}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" width="120" align="center" sortable>

            </el-table-column>
            <el-table-column prop="value" label="代码" width="120" align="center" sortable>
            </el-table-column>
            <el-table-column prop="weight" label="权重" width="120" align="center" sortable>
            </el-table-column>

            <el-table-column prop="createdBy" label="创建人" align="center" width="100" >
            </el-table-column>
            <el-table-column prop="createdTime" label="创建时间" align="center" min-width="180" sortable>
            </el-table-column>
            <el-table-column prop="lastModifiedBy" label="修改人" align="center" width="100">
            </el-table-column>
            <el-table-column prop="lastModifiedTime" label="修改时间" align="center" min-width="180" sortable>
            </el-table-column>
            <el-table-column prop="disabled" label="是否可用"  width="100" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.disabled" disabled> </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              label="操作" v-if="isAuth('sys:role:delete') || isAuth('sys:role:update') || isAuth('sys:role:assignMenu')"
              min-width="300">
              <template slot-scope="scope">
                <el-button size="mini" v-show="isAuth('sys:role:delete')" @click="deleteCurrentRow(scope.$index, scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
                <el-button size="mini" v-show="isAuth('sys:role:update')" @click="addOrUpdateHandle(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
                <el-button size="mini" v-show="isAuth('sys:role:assignMenu')" @click="assignMenuHandle(scope.row)" type="primary" icon="el-icon-setting" circle></el-button>

              </template>
            </el-table-column>
          </el-table>
          <el-row>
            <el-col style="margin-top: 13px">
              <div class="block">
                <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="filters.page"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="filters.limit"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="filters.total">
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="dialogFormVisible" @refreshDataList="search" ref="addOrUpdate"></add-or-update>
    <assign-menu v-if="assignMenuDialogaVisible"  ref="assignMenu"></assign-menu>

  </div>

</template>

<script>
  import { getRoleListPage,deleteById,saveRoleMenus } from '@/api/sys/role/';
  import {isAuth} from '@/utils/'
  import AddOrUpdate from './addOrUpdate.vue'
  import AssignMenu from './assignMenu.vue'

  import { generateTitle } from '@/utils/i18n'
  export default {
      name:'roleManage',
    data() {
      return {
        dialogFormVisible: false,
        assignMenuDialogaVisible: false,
        filters: {
          name: '',
          value:'',
          page:1,
          total:0,
          limit:10,
        },
        tablePage:{
          currentPage:1,
          total:0,
          pageSize:10,
        },
        defaultCheckedKeys:[],
        value1:true,
        loading: false,
        roles:[],
        currentSelectedRow:[],

        defaultProps: {
          children: 'children',
          label: 'name',
          isLeaf:'leaf',
          id:'id',
          disabled:function (data, node) {
            if(data.disabled){
                return false;
            }else{
                return true;
            }
          }
        },
        treeShow:false,
        menus:[]
      }
    },
    components: {
      AddOrUpdate,
      AssignMenu
    },
    methods: {
      isAuth,
      generateTitle,
      assignMenuHandle(row){
        this.assignMenuDialogaVisible = true
        this.$nextTick(() => {
          this.$refs.assignMenu.init(row)
        })
      },
      deleteCurrentRow(index,row){
        let that = this;
        this.$confirm('确定删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteById(row.id).then(function (result) {
              let {code,msg}  = result.data;
              if(code == 0){
                that.$message({
                  type: 'success',
                  message: msg
                });
                that.search();

              }else{
                that.$message.error(msg);
              }

          }).catch(function (error) {
           // that.$message.error(error.response.data.msg);
          });
        }).catch(() => {
        });

      },
      addOrUpdateHandle(row){
        this.dialogFormVisible=true;
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(row);
        })
      },
      handleSizeChange(val) {
        this.filters.limit = val;
        this.search();
      },
      handleCurrentChange(val) {
        this.filters.page = val;
        this.search();
      },
      handleSearch(){
        this.filters.total = 0;
        this.filters.page = 1;
        this.search();
      },
      search: function () {
        let that = this;
        that.loading = true;
        getRoleListPage(this.filters).then(function (result) {
         const data = result.data;
         that.roles= [];
         that.filters.total = data.data.totalCount;
         data.data.list.forEach((item) =>{
           that.roles.push(item);
         });
          that.loading = false;
        }).catch(function (error) {
          that.loading = false;

        });



      },

    },

    mounted() {
        this.search();
    }
  }
</script>

<style scoped>

</style>
